<template>
  <div>
    <div class="item" v-for="item of list" :key="item.id">
      <div class="item-title border-bottom">
        <i class="iconfont item-title-icon">&#xe62c;</i>
        {{ item.title }}
      </div>
      <div
        v-if="item.children && item.children.length > 0"
        class="item-children"
      >
        <detail-list :list="item.children"></detail-list>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailList',
  props: {
    list: {
      required: true,
      type: [Array]
    }
  }
}
</script>

<style lang="stylus" scoped>
.listWrap{
  color #fff
  min-height 50rem
  background red
}
.item{
  .item-children{
    padding-left 0.25rem
  }
  .item-title{
    line-height 0.8rem
    font-size 0.32rem
    padding 0 0.2rem
    position relative
    font-size 0.3rem
    .item-title-icon{
      display inline-block
      position relative
      font-size 0.3rem
      color #1cabb9
      margin-right: 0.05rem;
    }
  }
}
</style>
